<template>
  <div class="selectContainer">
     <div class='info-wrap'>
        <div class='info-line' @click='showModal(1)'>
            <div class='info-label'>楼层：</div>
            <div class='info-content'>
                {{floorName}}
            </div>
            <div class='arrow-right'>
            <i-icon type="enter" size="20" color="#dad9dd" />
            </div>
        </div>
        <div class='info-line' @click='showModal(2)'>
            <div class='info-label'>区域：</div>
            <div class='info-content'>
                {{zoneName}}
            </div>
            <div class='arrow-right'>
            <i-icon type="enter" size="20" color="#dad9dd" />
            </div>
        </div>
        <div class='info-line' @click='showModal(3)'>
            <div class='info-label'>设备系统：</div>
            <div class='info-content'>
                {{systemName}}
            </div>
            <div class='arrow-right'>
            <i-icon type="enter" size="20" color="#dad9dd" />
            </div>
        </div>
        <div class='info-line' @click='showModal(4)'>
            <div class='info-label'>设备类型：</div>
            <div class='info-content'>
                {{deviceName}}
            </div>
            <div class='arrow-right'>
            <i-icon type="enter" size="20" color="#c9d7db" />
            </div>
        </div>
      </div>
      <div class='btn-bottom'>
          <i-row>
              <i-col span="12" offset='6' i-class="col-class">
                <i-button @click="handleClick" type="primary" size='small' shape="circle" i-class='btn-sure'>确定</i-button>
              </i-col>
          </i-row>
      </div>
      <i-drawer mode="right" :visible="modalShow" mask-closable="false">
          <view class="modal-container">
              <div class='select-title'>{{title}}</div>
              <div class='select-wrap'>
                <scroll-view style='height:100%;' :scroll-y="true">
                  <radio-group  @change="handleChange">
                      <label  v-for="(item,index) in list" :key="index">
                        <div class='radio-line'>
                            <div class='radio-wrap'>
                              <image src='/static/images/icon_confirm@3x.png' v-if='selectId==item.id'/>
                              <image src='/static/images/icon_unconfirm.png' v-else/>
                              <input type="radio" name="list" :value="item.id" :checked="selectId==item.id" class='radio'>
                            </div>
                            <div>{{item.name}}</div>
                        </div>
                      </label>
                  </radio-group>
                </scroll-view>
              </div>
              <i-row>
                <i-col span="12" i-class="col-class">
                  <i-button @click="close" type="error" i-class='btn-small red' size='small' shape="circle">关闭</i-button>
                </i-col>
                 <i-col span="12" i-class="col-class">
                  <i-button @click="sure" type="primary" i-class='btn-small blue' size='small' shape="circle">确定</i-button>
                </i-col>
              </i-row>    
          </view>
      </i-drawer>
  </div>
</template>

<script type="text/javascript">
import { mapState } from 'vuex';
export default {
  beforeMount() {
    var params = this.$root.$mp.query;
    if(params.buildingId) this.buildingId = params.buildingId;
  },
  data() {
    return {
      modalShow:false,
      list: [],
      selectId:'',
      buildingId:'',
      floorId:'',
      zoneId:'',
      systemId:'',
      title:'',
      floorList:[],
      zoneList:[],
      systemList:[],
      deviceList:[],
      floorName:'全部',
      zoneName:'全部',
      systemName:'全部',
      deviceName:'全部',
      type:1,//1楼层2区域3系统4设备
    }
  },
  methods:{
    close(){
      this.modalShow = false;
    },
    sure(){
       if(this.type==1){
         this.floorId = this.selectId;
         this.floorList.map((item)=>{
          if(item.id==this.floorId){
            this.floorName = item.name
          }
         })
         this.findZone()
       }else if(this.type==2){
         this.zoneId = this.selectId;
         this.zoneList.map((item)=>{
            if(item.id==this.zoneId){
              this.zoneName = item.name
            }
          })
       }else if(this.type==3){
         this.systemId = this.selectId;
         this.systemList.map((item)=>{
          if(item.id==this.systemId){
            this.systemName = item.name
          }
         })
         this.findDevice()
       }else if(this.type==4){
         this.deviceId = this.selectId;
         this.deviceList.map((item)=>{
          if(item.id==this.deviceId){
            this.deviceName = item.name
          }
         })
       }
       this.close()
    },
    showModal(type){
      this.type = type;
      if(this.type==1){
        this.selectId = this.floorId;
        this.findFloor()
        this.title = '楼层'
      }else if(this.type==2){
        this.selectId = this.zoneId;
        this.list = this.zoneList;
        this.title = '区域'
      }else if(this.type==3){
        this.selectId = this.systemId;
        this.findSystem()
        this.title = '设备系统'
      }else if(this.type==4){
        this.selectId = this.deviceId;
        this.list = this.deviceList;
        this.title = '设备类型'
      }
      this.modalShow = true;
    },
    handleChange(el) {
      this.selectId = el.mp.detail.value;
    },
    findFloor(){
      this.$http.post({
        url:'/project/getZones',
        data:{
            ukey:this.userInfo.ukey,
            userId:this.userInfo.userId,
            buildingId:this.buildingId,
        }
      }).then((res)=>{
          if(res.s==0){
              this.list = this.floorList = [{name:'全部',id:''}].concat(res.i.Data);
          }
      }).catch((e)=>{
          console.log('请求失败',e)
      })
    },
    findZone(){
      if(this.floorId==''){
        this.zoneList = [{name:'全部',id:''}]
      }else{
        this.floorList.map((item)=>{
          if(item.id==this.floorId){
            this.zoneList = [{name:'全部',id:''}].concat(item.list);
          }
        })
      }
      this.zoneId = '';
      this.zoneName = '全部';
    },
    findSystem(){
        this.$http.post({
          url:'/project/getDeviceTypes',
          data:{
              ukey:this.userInfo.ukey,
              userId:this.userInfo.userId,
              buildingId:this.buildingId,
          }
        }).then((res)=>{
            if(res.s==0){
                this.list = this.systemList = [{name:'全部',id:''}].concat(res.i.Data);
            }
        }).catch((e)=>{
            console.log('请求失败',e)
        })
    },
    findDevice(){
      if(this.systemId==''){
        this.deviceList = [{name:'全部',id:''}]
      }else{
        this.systemList.map((item)=>{
          if(item.id==this.systemId){
            this.deviceList = [{name:'全部',id:''}].concat(item.list)
          }
        })
      }
      this.deviceId = '';
      this.deviceName = '全部';
    },
    handleClick(){
      let pages = getCurrentPages(); //获取当前页面pages里的所有信息。
      let prevPage = pages[pages.length - 2]; //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面，-3是上上个页面以此类推。
      prevPage.setData({  // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
          floorId:this.floorId,
          zoneId:this.zoneId,
          systemId:this.systemId,
          deviceTypeId:this.deviceId
      })  
      wx.navigateBack({delta:1})
    }
  },
  computed:{
    ...mapState(['userInfo']),
  },
}
</script>

<style lang='less'>
page{
  height:100%;
  background:#eef7fd;
}
::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}
.selectContainer{
    height: 100%;
    display: flex;
    flex-direction: column;
    .info-wrap{
        flex:1;
        display: flex;
        flex-direction: column;
        margin:0 30rpx;
        .info-line{
          display: flex;
          justify-content:space-between;
          line-height:60rpx;
          padding: 10rpx 0;
          background: #fff;
          border:2rpx solid #dfe3e5;
          border-radius:8rpx;
          color: #8a8a8a;
          margin-top: 30rpx;
        }
        .info-label{
          font-size:30rpx;
          color:#3f94d6;
          margin-left:20rpx; 
          align-self:center;
        }
        .info-content{
          flex:1;
          padding:0 20rpx; 
          text-align: right;
          .btn-line{
            margin: 20rpx;
          }
        }
        .arrow-right{
          align-self: center;
          margin-right:20rpx; 
        }
    }  
    .btn-sure{
      font-size:32rpx;
      background: #0d79cd
    } 
    .modal-container{
      background: #fff;
      width:60vw;
      height: 94vh;
      display: flex;
      flex-direction: column;
      .btn-small{
        font-size:32rpx;
        height: 60rpx;
        line-height: 60rpx;
        &.red{
          background:#fe5c57!important;
        }
        &.blue{
          background:#1182d2!important;
        }
      }
      .select-title{
        background: #1380d3;
        color: #fff;
        font-size:32rpx;
        height: 100rpx;
        line-height: 100rpx;
        padding-left:20rpx;
      }
      .select-wrap{
        flex:1;
        height: 50rpx;
      }
      .radio-line{
        height: 70rpx;
        line-height: 70rpx;
        padding: 0 20rpx;
        color:#83878a;
        font-size: 30rpx;
        display: flex;
        .radio-wrap{
          width: 60rpx;
          height: 60rpx;
          position: relative;
          image{
            position: absolute;
            left: 12rpx;
            top: 16rpx;
            width: 36rpx;
            height: 36rpx;
            z-index: 1;
          }
          .radio{
            position:absolute;
            left: 0;
            top: 0;
            z-index: 2;
            opacity: 0;
          }
        }
      }
    }
}
</style>
